<template>
  <a-table  
    :columns="columns"  
    :dataSource="data"  
    rowKey="key"  
    bordered
    style="margin: 1em;"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'daysUsed'">
        <span v-if="!record.daysLeft"><a-tag color="#f50">网络不可达</a-tag></span>
        <span v-else-if="record.daysLeft > 0">
          已用 {{record.daysUsed}} 天 / 剩余 {{record.daysLeft}} 天
          <a-progress :percent="record.daysUsed / (record.daysLeft + record.daysUsed) * 100" 
            :strokeColor="record.daysLeft > 30 ? '#52c41a' : '#f5222d'"
            :format="(percent) => `${percent.toFixed(2)}%`"></a-progress>
        </span>
        <span v-else>
          <a-alert :message="'已过期' + Math.abs(record.daysLeft) + '天'" type="error" show-icon />
        </span>
      </template>
    </template>
  </a-table>  
</template>
<script>
import http from '@/utils/http';

export default {
  data() {
    return {
      hexStr: '',
      enterHexStr: '',
      domains: [],
      originalData: {  
        daysLeft: 70,  
        daysUsed: 20,  
        des: "内网统一认证",  
        domain: "zzu.gdatacloud.com",  
        issuer: { C: "US", O: "Let's Encrypt", CN: "E6" },  
        port: "443",  
        subject: { CN: "*.ai.gdatacloud.com" },  
        valid_from: "2024-08-22T05:32:18.000Z",  
        valid_to: "2024-11-20T05:32:17.000Z",  
      }, 
      data: [  
        // {  
        //   key: 1,  
        //   daysLeft: this.originalData.daysLeft,  
        //   daysUsed: this.originalData.daysUsed,  
        //   des: this.originalData.des,  
        //   domain: this.originalData.domain,  
        //   issuerC: this.originalData.issuer.C,  
        //   issuerO: this.originalData.issuer.O,  
        //   issuerCN: this.originalData.issuer.CN,  
        //   port: this.originalData.port,  
        //   subjectCN: this.originalData.subject.CN,  
        //   validFrom: this.originalData.valid_from,  
        //   validTo: this.originalData.valid_to,  
        // },  
      ],  
      // 定义表格列  
      columns: [  
        {  
          title: '域名',  
          dataIndex: 'domain',  
          key: 'domain',  
        },  
        {  
          title: '端口',  
          dataIndex: 'port',  
          key: 'port',  
        },  
        {  
          title: '描述',  
          dataIndex: 'des',  
          key: 'des',  
        },  
        {  
          title: '颁发者国家',  
          dataIndex: 'issuerC',  
          key: 'issuerC',  
        },  
        {  
          title: '颁发者组织',  
          dataIndex: 'issuerO',  
          key: 'issuerO',  
        },  
        {  
          title: '颁发者CN',  
          dataIndex: 'issuerCN',  
          key: 'issuerCN',  
        },  
        {  
          title: '主题CN',  
          dataIndex: 'subjectCN',  
          key: 'subjectCN',  
        },  
        {  
          title: '有效期开始',  
          dataIndex: 'valid_from',  
          key: 'valid_from',  
          scopedSlots: { customRender: 'validFrom' },  
        },  
        {  
          title: '有效期结束',  
          dataIndex: 'valid_to',  
          key: 'valid_to',  
          scopedSlots: { customRender: 'validTo' },  
        },  
        {  
          title: '已用天数',  
          dataIndex: 'daysUsed',  
          key: 'daysUsed',  
        },
        // {  
        //   title: '剩余天数',  
        //   dataIndex: 'daysLeft',  
        //   key: 'daysLeft',  
        // },  
      ],  
    }
  },
  mounted() {
    http.get('/domains/certificates').then(res => {
      this.data = res.data
    })
  },
  methods: {
    calculate() {
      this.enterHexStr = this.hexStr
    },
    hexToSingle (num) {
      var a = num;
      var b = parseInt(a,16);
      var s = (b&0x80000000) ? -1 : 1;
      var e = (b&0x7f800000)/0x800000-127;
      var c = (b&0x7fffff)/0x800000;
      var re = s*(1+c)*Math.pow(2,e);
      return re;
    }
  }
}
</script>
<style scoped>
a {
  color: #42b983;
}
</style>
